<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>注册</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1>注册新用户</h1>
    <form id="registerForm">
        <div class="form-group">
            <label for="userName">用户名</label>
            <input type="text" id="userName" name="userName" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="userEmail">邮箱</label>
            <input type="email" id="userEmail" name="userEmail" class="form-control" required>
            <button type="button" id="sendVerificationCode" class="btn btn-link">发送验证码</button>
        </div>
        <div class="form-group" id="verificationCodeGroup" >
            <label for="verificationCode">验证码</label>
            <input type="text" id="verificationCode" name="verificationCode" class="form-control" required>
            <button type="button" id="verifyCode" class="btn btn-link">验证</button>
        </div>
        <div class="form-group" id="passwordGroup" >
            <label for="userPassword">密码</label>
            <input type="password" id="userPassword" name="userPassword" class="form-control" required>
        </div>
        <button type="submit" id="registerButton" class="btn btn-success" disabled>注册</button>
        <a href="/userManage" class="btn btn-secondary">返回列表</a>
    </form>
</div>

<script>
document.getElementById('sendVerificationCode').onclick = function() {
    var email = document.getElementById('userEmail').value;
    fetch('/user/sendVerificationCode', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({email: email})
    }).then(response => response.json())
      .then(data => alert("验证码已发送，请查收邮件"));
};

document.getElementById('verifyCode').onclick = function() {
    var verificationCode = document.getElementById('verificationCode').value;
    fetch('/user/verifyCode', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({verifyCode: verificationCode})
    }).then(response => response.json())
      .then(data => {
        console.log("Server response:", data); // 用于调试
        if (data.code === 200 && data.message === "success")
        {
              document.getElementById('passwordGroup').style.display = 'block';
              document.getElementById('registerButton').disabled = false;
          } else {
              alert("验证码错误：" + data.message);
          }
      })
      .catch(error => console.error('Error:', error));
};

document.getElementById('registerForm').onsubmit = function(event) {
    event.preventDefault();
    var user = {
        userName: document.getElementById('userName').value,
        userEmail: document.getElementById('userEmail').value,
        userPassword: document.getElementById('userPassword').value
    };
    fetch('/user/register', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(user)
    })
    .then(response => response.json())
    .then(data => {
        alert("注册成功");
        window.location.href = "/userManage";
    })
    .catch((error) => {
        console.error('Error:', error);
        alert(error.message);
    });
};
</script>

<!-- Bootstrap JS and dependencies (可选) -->
<script src="/static/js/jquery-3.5.1.slim.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>